@import '~styles/settings.scss';

.c-chart-tooltip {
  padding: rem(10px) rem(20px);
  box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.19);
  background-color: $slate;
  color: $white;
  border-radius: rem(2px);
  font-size: rem(16px);
  position: relative;
  z-index: 100000;

  .data-line {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;

    &.right {
      justify-content: flex-end;
      text-align: right;
    }
  }

  .data-label {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    margin-right: rem(20px);
  }

  .break-label {
    font-size: rem(14px);
    font-style: italic;
    flex-direction: row;
    padding-top: rem(5px);
    padding-bottom: rem(5px);
  }

  .data-color {
    width: rem(12px);
    height: rem(12px);
    min-height: rem(12px);
    min-width: rem(12px);
    border-radius: 50%;
    margin-right: rem(5px);
    margin-top: rem(5px);
  }

  .data-dash {
    height: rem(2px);
    border-radius: 0;
    border: none;
    border-top: 2px dotted;
    align-self: center;
    transform: translateY(2px);
  }

  &.simple {
    font-size: rem(12px);

    .break-label {
      font-size: rem(12px);
    }

    .data-color {
      font-size: rem(12px);
    }
  }
}
